@charset "utf-8";
/* body{font-family:Helvetica, Arial, Verdana;background:#efefef url('../img/ticks.png') repeat 0 0;margin:15px 0 0 0;font-size:12px;} */
.container{position:relative;width:875px;margin:0 auto;-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-o-transition:all 1s ease;transition:all 1s ease;	}

/* filters */
#filters{margin: 3% 0 1% 0;padding:0;list-style:none;}
#filters li{float:left;}
#filters li span{
	display:block;
	padding:10px 50px;
	text-decoration:none;
	color:black;
	cursor:pointer; 
	font-size: 18px;
	border: 1px solid black;
	margin: 0 10px;
}
#filters li span.active{background:#0256ac;color:#fff;}
#filters li span:hover{
	background:#0256ac;color:#fff;
}
#portfoliolist .portfolio{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;width:32%;*width:32%;margin:2% 0 0 2%;display:none;float:left;overflow:hidden;}
#portfoliolist li:first-child{
	margin-left: 0;
}
#portfoliolist li:first-child+li+li+li{
	margin-left: 0;
}
.portfolio-wrapper{overflow:hidden;position:relative!important;background:white;cursor:pointer;}
.portfolio img{max-width:100%;position:relative;}
.portfolio .label{position:absolute;width:100%;height:40px;bottom:-40px;left:0;line-height: 40px;}
.portfolio .label-bg{background:#0256ac;width:100%;height:100%;position:absolute;top:0;left:0;}
.portfolio .label-text{color:#fff;position:relative;z-index:500;text-align: center;font-size: 13px;}
.portfolio .text-category{display:block;font-size:9px;}

/* #Tablet (Portrait) */
@media only screen and (min-width:768px) and (max-width:959px){
	.container{
		width:768px;
	}
}


/*  #Mobile (Portrait) - Note:Design for a width of 320px */
@media only screen and (max-width:767px){
	.container{
		width:95%;
	}
	
	#portfoliolist .portfolio{
		width:48%;
		margin: 0 1%;
	}
}

/* #Mobile (Landscape) - Note:Design for a width of 480px */
@media only screen and (min-width:480px) and (max-width:767px){
	.container{
		width:70%;
	}
}

/* #Clearing */

/* Self Clearing Goodness */
.container:after{content:"\0020";display:block;height:0;clear:both;visibility:hidden;}
.clearfix:before,.clearfix:after,.row:before,.row:after{content:'\0020';display:block;overflow:hidden;visibility:hidden;width:0;height:0;}
.row:after,.clearfix:after{clear:both;}
.row,.clearfix{zoom:1;}